<template>
  <div class="game_details">
    <div class="header">
      <nut-navbar :clickable="false">
        <template #left>
          <iconpark-icon @click="goBackHome" class="close" icon-id="back" size="24"></iconpark-icon>
        </template>
        <template #content>
          <span>{{ state.gameName }}</span>
        </template>
        <span>{{ state.gameName }}</span>
        <!-- <template #right v-if="isLocalLoggedIn">
          <div class="amount_box"> 
            <iconpark-icon class="close" icon-id="dong1" size="1.2rem"></iconpark-icon>
            <span class="price">
              <nut-price :price="verifyNumberComma(String(convert2DisplayMoney(roleInfo.money)))" size="small"
                style="color:#FFD56D;" :decimal-digits="0" thousands :need-symbol="false" />
            </span>
            <iconpark-icon @click="router.push('deposit')" class="close" icon-id="add" size="1.2rem"></iconpark-icon>
          </div>
        </template> -->
      </nut-navbar>
    </div>
    <div class="content">
      <!-- 头部游戏卡片 -->
      <div class="game_card">
        <div class="game_card_body">
          <div class="bg_img_box">
            <img :src="state.img" class="bg_img" />
          </div>
          <div class="card_body_content">
            <nut-avatar size="130" shape="square" bg-color="transparent">
              <img class="avatar" :src="state.img" />
            </nut-avatar>
            <div class="end">
              <div class="game_information">
                <!-- <span class="title">{{ state.gameName }}</span> -->
                <span class="original">{{ t('game_page_origin') }} {{ state.gameItem.venue_name?.[lang] ||
                  state.gameItem.name?.[lang] }} {{
                    state.gameItem.agent_id_name?.[lang] }}</span>
                <span>{{ t('game_page_currency') }}{{ gameInfo.money_type || 'VND' }}</span>
              </div>
              <nut-button color="linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%)" class="enter_box" block
                @click="openGame()">
                {{ t('game_page_enterGame') }}
              </nut-button>
            </div>
          </div>
        </div>
        <div class="game_card_foot">
          <view class="start">
            <div class="game_action">
              <img :src="iconForLike" @click="gameAction()"></img>
              <div class="number">
                {{ gameInfo.like_count || 0 }}
              </div>
            </div>
            <div class="game_action">
              <img class="shoucang" :src="iconForStar" @click="reqCollect()"></img>
              <div class="number">
                {{ gameInfo.favorite_count || 0 }}
              </div>
            </div>
          </view>
          <IconFont name="/imgs/game/share.webp" size="16px" @click=" visible = true"></IconFont>
        </div>
      </div>

      <!-- 游戏详情 -->
      <div class="game_detail">
        <div class="head">
          <span class="title">
            {{ state.gameName }}
          </span>
          <div class="tags">
            <span class="tag"> {{ state.gameItem.venue_name?.[lang] || state.gameItem.name?.[lang] }} {{
              state.gameItem.agent_id_name?.[lang] }}</span>
            <!-- <span class="tag">Orginals</span>
            <span class="tag">推荐</span>
            <span class="tag">原创</span> -->
          </div>
        </div>
        <div class="body">
          <div class="information">
            <div class="line">
              <span> {{ t('game_page_houseEdge') }}</span>
              <span style="--color:#4C4CE0;">{{ gameInfo.dealer_advantage || '--' }}%</span>
            </div>
            <div class="line">
              <span> {{ t('game_page_rtp') }}</span>
              <span style="--color:#F49A24;">{{ gameInfo.rtp || '--' }}%</span>
            </div>
            <div class="line">
              <span> {{ t('game_page_reelDesign') }}</span>
              <span>{{ gameInfo.reels ? gameInfo.reels : '--' }}</span>
            </div>
            <div class="line">
              <span> {{ t('game_page_maxWin') }}</span>
              <span>{{ gameInfo.max_win ? gameInfo.max_win : '--' }}</span>
            </div>
            <div class="line">
              <span> {{ t('game_page_volatility') }}</span>
              <span>{{ gameInfo.volatility == 1 ? t('high') : gameInfo.volatility == 2 ? t('middle') :
                gameInfo.volatility
                  ==
                  3 ?
                  t('low') :
                '--'
                }}</span>
            </div>
            <div class="line">
              <span> {{ t('game_page_betRange') }}</span>
              <span>{{ gameInfo.min_bet + '~' + gameInfo.max_bet }}</span>
            </div>
          </div>
          <!--  -->
          <template v-if="expand">
            <div class="tabs_title_box">
              <div class="tabs_title">
                <div v-for="(item, index) of tabsList()" :key="index" @click="tabsValue = index" class="custom_title"
                  :class="{ active: tabsValue === index }">
                  {{ item }}
                </div>
              </div>
            </div>
            <nut-tabs v-model="tabsValue" class="tabs">
              <nut-tab-pane pane-key="0">
                <div class="ranking" v-if="tabsValue == 0 && topWinners?.length > 0">
                  <div v-for="(item, index) of topWinners" :key="index" class="ranking_item">
                    <div class="head" :style="{
                      background: ['linear-gradient(90deg, #DCBA60 0%, #C59829 100%)', 'linear-gradient(90deg, #75BAF2 0%, #4D7FF0 100%)', 'linear-gradient(90deg, #C97928 0%, #BC641D 100%)'][index]
                    }">
                      <nut-avatar size="26" bg-color="transparent">
                        <img src="/imgs/game/ranking-avatar.webp" />
                      </nut-avatar>
                      <span class="name">{{ item.nickname }}</span>
                      <span>
                        PKbet-SLOT
                      </span>
                      <img class="ranking_icon" :src="`/imgs/game/ranking-${index}.webp`" />
                    </div>
                    <div class="body">
                      <div class="information">
                        <div class="line">
                          <span>{{ t('game_page_bonus') }}</span>
                          <span style="--color:#F49A24;">{{ item.bonus ? '+' + verifyNumberComma(String(item.bonus)) :
                            '--'
                            }}</span>
                        </div>

                        <div class="line">
                          <span>{{ t('game_page_betAmount') }}</span>
                          <span>{{ verifyNumberComma(String(item.bet_money)) || '--' }}</span>
                        </div>
                        <div class="line">
                          <span>{{ t('game_page_odds') }}</span>
                          <span>{{ item.odds || '--' }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="nodata">{{ t('nomore_data') }}</div>
              </nut-tab-pane>
              <nut-tab-pane pane-key="1">
                <div class="ranking" v-if="tabsValue == 1 && topSingleWinners?.length > 0">
                  <div v-for="(item, index) of topSingleWinners" :key="index" class="ranking_item">
                    <div class="head" :style="{
                      background: ['linear-gradient(90deg, #DCBA60 0%, #C59829 100%)', 'linear-gradient(90deg, #75BAF2 0%, #4D7FF0 100%)', 'linear-gradient(90deg, #C97928 0%, #BC641D 100%)'][index]
                    }">
                      <nut-avatar size="26" bg-color="transparent">
                        <img src="/imgs/game/ranking-avatar.webp" />
                      </nut-avatar>
                      <span class="name">{{ item.nickname }}</span>
                      <span>
                        PKbet-SLOT
                      </span>
                      <img class="ranking_icon" :src="`/imgs/game/ranking-${index}.webp`" />
                    </div>
                    <div class="body">
                      <div class="information">
                        <div class="line">
                          <span>{{ t('game_page_bonus') }}</span>
                          <span style="--color:#F49A24;">{{ item.bonus ? '+' + verifyNumberComma(String(item.bonus)) :
                            '--'
                            }}</span>
                        </div>

                        <div class="line">
                          <span>{{ t('game_page_betAmount') }}</span>
                          <span>{{ verifyNumberComma(String(item.bet_money)) || '--' }}</span>
                        </div>
                        <div class="line">
                          <span>{{ t('game_page_odds') }}</span>
                          <span>{{ item.odds || '--' }}</span>
                        </div>

                      </div>
                    </div>

                  </div>
                </div>
                <div v-else class="nodata">{{ t('nomore_data') }}</div>
              </nut-tab-pane>
              <nut-tab-pane pane-key="2">
                <div class="rate rate_top_box" v-if="tabsValue == 2">
                  <div class="rate_head">
                    <span class="score">{{ rateValue }}</span>
                    <div class="rate_head_end">
                      <nut-rate v-model="rateValue" :count="5" size="20px" :spacing="8" readonly active-color="#FFAE00"
                        void-color="#2B2865" />
                      <span>{{ t('game_page_fullScore') }} 5 {{ t('game_page_score') }}</span>
                    </div>
                  </div>
                  <div class="rate_body">
                    <div class="line">
                      <nut-rate v-bind:model-value="5" :count="5" size="16px" :spacing="8" readonly
                        active-color="#2B2865" void-color="transparent" />
                      <nut-progress :percentage="(rateArr[5] / (rateArr[0] || 1)) * 100" :is-show-percentage="false"
                        :show-text="false" stroke-width="6px"
                        stroke-color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" />
                    </div>

                    <div class="line">
                      <nut-rate v-bind:model-value="4" :count="5" size="16px" :spacing="8" readonly
                        active-color="#2B2865" void-color="transparent" />
                      <nut-progress :percentage="(rateArr[4] / (rateArr[0] || 1)) * 100" :is-show-percentage="false"
                        :show-text="false" stroke-width="6px"
                        stroke-color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" />
                    </div>

                    <div class="line">
                      <nut-rate v-bind:model-value="3" :count="5" size="16px" :spacing="8" readonly
                        active-color="#2B2865" void-color="transparent" />
                      <nut-progress :percentage="(rateArr[3] / (rateArr[0] || 1)) * 100" :is-show-percentage="false"
                        :show-text="false" stroke-width="6px"
                        stroke-color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" />
                    </div>

                    <div class="line">
                      <nut-rate v-bind:model-value="2" :count="5" size="16px" :spacing="8" readonly
                        active-color="#2B2865" void-color="transparent" />
                      <nut-progress :percentage="(rateArr[2] / (rateArr[0] || 1)) * 100" :is-show-percentage="false"
                        :show-text="false" stroke-width="6px"
                        stroke-color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" />
                    </div>

                    <div class="line">
                      <nut-rate v-bind:model-value="1" :count="5" size="16px" :spacing="8" readonly
                        active-color="#2B2865" void-color="transparent" />
                      <nut-progress :percentage="(rateArr[1] / (rateArr[0] || 1)) * 100" :is-show-percentage="false"
                        :show-text="false" stroke-width="6px"
                        stroke-color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" />
                    </div>
                  </div>
                </div>
                <div class="rate_bottom" style="margin-top: 10px;">
                  <div class="rate">
                    <span> {{ t('game_page_rateGame') }}</span>
                    <nut-rate v-model="startValue" :count="5" size="20px" :spacing="8" active-color="#FFAE00"
                      void-color="#2B2865" />
                  </div>
                  <div class="rate">
                    <span>{{ rateArr[0] }}+ {{ t('game_page_rated') }}</span>

                    <nut-avatar-group span="-4" :max-count="5" max-content="">
                      <nut-avatar v-for="item of 5" :key="item" size="20" bg-color="transparent">
                        <img src="/imgs/game/ranking-avatar.webp" />
                      </nut-avatar>
                    </nut-avatar-group>
                  </div>
                </div>
              </nut-tab-pane>
            </nut-tabs>
          </template>

        </div>
        <div class="foot" @click="() => {
          expand = !expand
        }">
          {{ expand ? t('game_page_collapse') : t('game_page_expand') }}
          <IconFont v-if="expand" name="/imgs/game/up.webp" size="7px"></IconFont>
          <IconFont v-else name="/imgs/game/down.webp" size="7px"></IconFont>

        </div>
      </div>

      <!-- <Box title="推荐游戏" icon="/imgs/game/icon1.webp" :data="new Array(20)" :row="2">

        <div slot="default" class="all_game">
          <img class="bg_img" src="http://18.167.187.79:8053/uploads/images/FC.png" alt="" />
          <iconpark-icon class="collect_img" name="shoucang-def" size="1rem"></iconpark-icon>
          <span class="game_name">Fortune Taurus</span>
        </div>
      </Box> -->
      <div class="hot_box">
        <HomeHotGame />
      </div>
      <div class="hot_box" v-if="!hideHomeWinning">
        <HomeWinning isGameDetail />
      </div>
    </div>
    <shareModal v-model:visible="visible"></shareModal>
    <Modal v-model:visible="visible1" :title="t('insufficient_funds')">
      <div class="modal_body">
        <div class="content">
          <div class="content_text">
            <!-- {{ t('game_page_insufficientMoney') }} -->
            {{ t('min_entry_amount') }}
            <span class="money_num">{{ verifyNumberComma(String(convert2DisplayMoney(gameInfo.min_bet))) }}</span>
          </div>
        </div>
        <div class="btns">
          <Btn height="44px" v-shrink-on-click width="140px" class="submit" @click="router.push('/deposit')">{{
            t('top_up')
            }}
          </Btn>
          <Btn height="44px" v-shrink-on-click width="140px" class="submit gray" @click="visible1 = false">{{
            t('got_it') }}
          </Btn>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import pinia from '@/store';
import { User } from '@/store/user';
import { storeToRefs } from 'pinia';
import { ref, onMounted, reactive, onUnmounted, computed, watch, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { convert2DisplayMoney } from '@/utils/useStoreMethods';
import { getGameUrl } from '@/utils/useNetMethods';
import { Page } from "@/store/page";
const { lang } = storeToRefs(Page(pinia));
import { Local } from "@/utils/storage";
import { unserialize } from '@/utils/useStoreMethods';
import { NetPacket } from "@/netBase/NetPacket";
import PKwebsocket from "@/lolo/Ws";
import shareModal from "@/views/me/components/shareModal.vue";
import HomeHotGame from "./../home/components/homeHotGame.vue";
import HomeWinning from "./../home/components/homeWinning.vue";
import { verifyNumberComma } from "@/utils/publicMethods";
import { repMyGamesData } from "@/utils/useNetMethods";
const { allCollected } = storeToRefs(User(pinia));
import eventBus from "@/lolo/eventBus";
import { joinURL } from '@/utils/publicMethods'

defineProps({
  hideHomeWinning: {
    type: Boolean,
    default: false
  }
})

// isLocalLoggedIn,
const { roleInfo } = storeToRefs(User(pinia));
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const router = useRouter()
const route = useRoute();

const expand = ref(false)
const tabsValue = ref(0)
const tabsList = () => [t('game_page_dailyMaxWin'), t('game_page_dailyMaxSingleWin'), t('game_page_gameRating')]
const { settings } = storeToRefs(Page(pinia));

const gameItem = Local.get('selectedGameItem')
const state = reactive({
  gameItem: gameItem,
  img: joinURL(settings.value.backend_upload,  (gameItem.gamePictureH5 || gameItem.picture_h5)),
  gameName: unserialize(gameItem.name, true), // todo
  gameid: gameItem.game_id || gameItem.gameId,
  id: gameItem.id,
  agentId: gameItem.agentId,
  action_type: 0,
  three_game_id: 0,
})
const visible = ref(false);
const gameInfo = ref({
  game_status: 0,//0,表示未点赞，未收藏  1,表示已点赞，未收藏  2,表示未点赞，已收藏  3,表示已点赞，已收藏
  dealer_advantage: 0,
  rtp: 0,
  reels: 0,
  max_win: 0,
  volatility: 3,
  money_type: 'VND',
  min_bet: 0,
  max_bet: 0,
  rating: '',
  like_count: 0,
  favorite_count: 0,
  // favorite_count: 0,
})

// rating：50，10，20，5，1，6
// 50是人数 10是评价1分的人数 20是评价2分的人数..
const rateArr = computed(() => {
  const defaultArr = [0, 0, 0, 0, 0, 0, 0]; // 默认值
  try {
    const parsedArr = gameInfo.value.rating ? JSON.parse(gameInfo.value.rating) : defaultArr;
    if (Array.isArray(parsedArr)) {
      startValue.value = parsedArr[6]
    }
    return Array.isArray(parsedArr) ? parsedArr.map((num) => num || 0) : defaultArr;
  } catch {
    return defaultArr; // 如果解析失败，返回默认值
  }
});

const rateValue = computed(() => {
  const [totalPeople, num1, num2, num3, num4, num5] = rateArr.value;
  if (!totalPeople) return 0; // 避免除以 0
  const totalScore = 5 * num5 + 4 * num4 + 3 * num3 + 2 * num2 + 1 * num1;
  return (totalScore / totalPeople).toFixed(1);
});

const setRating = async () => {
  const req_NetPacket = NetPacket.req_submit_game_rating();
  req_NetPacket.rating = startValue.value;
  req_NetPacket.key =  await getThreeGameId();
  PKwebsocket.instance.send(req_NetPacket, false, {
    callbackName: 'msg_notify_submit_game_rating_result',
    callback: handleSetRating
  })
};

const startValue = ref(0)
const topWinners = ref()
const topSingleWinners = ref()
watch(startValue, () => {
  setRating()
})
const handleSetRating = (rs: any) => {
  if (rs.result == 1) {
    // 操作成功
    getGameFullInfo()
  }
};

/**
 * 返回首页
 */
const goBackHome = () => {
  // router.push('/')
  router.go(-1)
}


const visible1 = ref(false);
const openGame = () => {
  if (gameInfo.value.min_bet > roleInfo.value.money) {
    visible1.value = true;
    return
  }
  let item = Local.get("selectedGameItem");
  let langObj: any = {
    'en-US': 3,
    'vi-VN': 2,
    'zh-CN': 1
  }
  getGameUrl(item, langObj[lang.value], Page(pinia))
}

const handleGameInfo = async (rs: any) => {
  Object.assign(gameInfo.value, rs)
  console.log('游戏全部信息', gameInfo.value)
  await nextTick();
};
const iconForLike = computed(() => {
  let src = '/imgs/game/like.webp'
  if (gameInfo.value.game_status == 1 || gameInfo.value.game_status == 3) {
    src = '/imgs/game/like1.webp'
  }
  nextTick();

  return src;
});

const iconForStar = computed(() => {
  let src = '/imgs/game/star.webp'
  if (gameInfo.value.game_status == 2 || gameInfo.value.game_status == 3) {
    src = '/imgs/game/star1.webp'
  }
  return src
});
const handleTopWinners = (rs: any) => {
  console.log('当日最高盈利', rs.top_winners)
  topWinners.value = rs.top_winners;
};
const handleTopSingleWinners = (rs: any) => {
  console.log('当日单注最高盈利', rs.top_single_winners)
  topSingleWinners.value = rs.top_single_winners;
};

const handleGameAction = (rs: any) => {
  console.log('操作结果：...', rs)
  if (rs.result == 1) {
    // 操作成功
    getGameFullInfo()
    // 同步收藏状态
    repMyGamesData(async (res: any) => {
      await User(pinia).getCollected(res.collected);
    })
  }
};
const getThreeGameId = async () => {
  const query = NetPacket.three_game_id()
  query.agent_id = state.gameItem.agentId || state.gameItem.id  //id 为厂商游戏  例如 体育 真人之类
  query.game_id = state.gameid
  return query
};
const getGameFullInfo = async () => {
  const req_NetPacket = NetPacket.req_get_game_full_info();
  req_NetPacket.key =  await getThreeGameId();
  PKwebsocket.instance.send(req_NetPacket, true, {
    callbackName: 'msg_notify_game_full_info',
    callback: handleGameInfo
  })
};

const getTopWinners = async () => {
  const req_NetPacket = NetPacket.req_get_top_winners();
  req_NetPacket.key =  await getThreeGameId();
  PKwebsocket.instance.send(req_NetPacket, true, {
    callbackName: 'msg_notify_get_top_winners',
    callback: handleTopWinners
  })
};
const getTopSingleWinners = async () => {
  const req_NetPacket = NetPacket.req_get_top_single_winners();
  req_NetPacket.key =  await getThreeGameId();
  PKwebsocket.instance.send(req_NetPacket, true, {
    callbackName: 'msg_notify_get_top_single_winners',
    callback: handleTopSingleWinners
  })
};

//  {int, action_type}  % 操作类型：1=点赞，2=取消点赞，
const gameAction = async () => {
  state.action_type = (gameInfo.value.game_status == 1 || gameInfo.value.game_status == 3) ? 2 : 1;
  const req_NetPacket = NetPacket.req_game_action();
  req_NetPacket.action_type = state.action_type;
  req_NetPacket.key =  await getThreeGameId();
  PKwebsocket.instance.send(req_NetPacket, false, {
    callbackName: 'msg_notify_game_action_result',
    callback: handleGameAction
  })
};
//  {int, action_type}  % 操作类型：1=点赞，2=取消点赞，
const reqCollect = async () => {
  const query = NetPacket.req_modify_collect()
  query.agentId = state.gameItem.agentId || state.gameItem.id  //id 为厂商游戏  例如 体育 真人之类
  query.id = state.gameItem.id
  query.type = allCollected.value.includes(query.id) ? 1 : 0
  Local.set('gameId', query.id)
  PKwebsocket.instance.send(query, true)
};

watch(() => route.query.id, (newId) => {
  if (newId) {
    const gameItem = Local.get('selectedGameItem')
    state.gameItem = gameItem;
    state.gameid = newId;
    state.id = gameItem.id;
    state.img =joinURL(settings.value.backend_upload,  (gameItem.gamePictureH5 || gameItem.picture_h5));
    state.gameName = gameItem ? unserialize(gameItem.name, true) : '';
    state.gameid = gameItem ? gameItem.game_id || gameItem.gameId : '';
    getGameFullInfo();
    getTopWinners();
    getTopSingleWinners();
  }
});
const init = () => {
  // 刷新游戏信息  
  getGameFullInfo()
  // 同步收藏状态
  repMyGamesData(async (res: any) => {
    await User(pinia).getCollected(res.collected);
  })
}
onMounted(async () => {

  getGameFullInfo()
  // // 请求获取当日最高盈利 
  getTopWinners()
  // // 请求获取当日单注最高盈利
  getTopSingleWinners()
  eventBus.on('msg_notify_modify_collect', init)
})
onUnmounted(() => {
  eventBus.off('msg_notify_modify_collect', init)
})
</script>
<style scoped lang="scss">
.game_details {
  height: calc(var(--vh) * 100);
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-rows: auto 1fr;

  .header {
    min-height: 45px;
    position: fixed;
    top: 0;
    z-index: 99;
    background: url('/imgs/home/public_bg.webp');
    background-size: 80%;
    width: 100%;
    padding-top: calc(env(safe-area-inset-top));
  }

  :deep(.nut-tabs .nut-tabs__titles) {
    padding: 0;
    height: 44px;
    overflow-x: auto !important;
  }

  :deep(.nut-navbar__right) {
    padding-right: 0;
  }

  .amount_box {
    display: flex;
    align-items: center;
    border-radius: 14px;
    background: #1D1C48;
    padding: 4px 0 4px 6px;

    >span {
      margin: 0 6px;
    }
  }

  // 信息展示
  .information {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .line {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      span {
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: var(--color, #A8A8CA);
      }
    }
  }

  .content {
    width: 100vw;
    padding: 60px 14px 120px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: calc(env(safe-area-inset-top) + 60px);

    // 头部游戏卡片
    .game_card {
      width: 347px;
      height: 194px;
      border-radius: 12px;
      overflow: hidden;

      .game_card_body {
        position: relative;
        overflow: hidden;

        .bg_img {
          width: 100%;
          height: 100%;
          left: 0;
          position: absolute;
          filter: blur(12px);
          z-index: 0;
        }

        .card_body_content {
          padding: 15px;
          display: flex;
          flex-direction: row;
          position: relative;
          z-index: 1;

          .avatar {
            border-radius: 20px;
            width: 130px;
          }

          .end {
            width: 171px;
            display: flex;
            flex-direction: column;
            // flex: 1;
            padding-bottom: 12px;
            margin-left: calc(env(safe-area-inset-top) + 11px);

            --nut-button-border-radius: 8px;
            -–nut-button-default-height: 36px;

            .game_information {
              flex: 1;
              display: flex;
              flex-direction: column;

              .original {
                font-family: PingFang SC;
                font-size: 20px;
                font-weight: 600;
                line-height: 28px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
              }

              span {
                color: #FFFFFF;
                font-family: PingFang SC;
                font-size: 12px;
                font-weight: 400;
                line-height: 16.8px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
              }

              .club_dropdown {
                margin: 4px 0;

                :deep(.select_item) {
                  height: 28px;
                  color: #A8A8CA;
                  font-size: 14px;

                  .select_item_option {
                    min-height: 32px !important;
                  }
                }
              }
            }

            .enter_box {
              height: 36px;
            }
          }
        }
      }

      .game_card_foot {
        background-color: #131232;
        padding: 8.3px 14px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 32px;

        .start {
          display: flex;
          flex-direction: row;
          gap: 12px;

          .game_action {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 4px;

            img {
              width: 16px;
              height: 16px;
            }

            .number {
              color: #D8ECFF;
              font-size: 14px;
            }
          }
        }
      }
    }


    .game_detail {
      display: flex;
      flex-direction: column;

      border-radius: 12px;
      overflow: hidden;

      .head {
        padding: 10px 13px;
        display: flex;
        flex-direction: row;
        gap: 22px;
        align-items: center;
        background-color: #1B1F4B;
        height: 40px;

        .title {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 600;
          line-height: 19.6px;
          text-align: left;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
          color: #FFFFFF;
        }

        .tags {
          flex: 1;
          display: flex;
          flex-direction: row;
          gap: 6px;
          justify-content: end;

          .tag {
            font-size: 12px;
            font-weight: 600;
            top: 309px;
            left: 105px;
            gap: 0px;
            border-radius: 4px;
            padding: 3px 6px;
            background-color: #282747;
            color: #A8A8CA;
          }
        }
      }

      .body {
        padding: 15px 14px;
        background-color: #131232;
        display: flex;
        flex-direction: column;

        .tabs_title_box {
          width: 100%;
          background-color: #0B0B23;
          border-radius: 8px;
          margin: 15px 0 8px;
        }

        .tabs_title {
          width: 100%;
          display: flex;
          justify-content: space-around;
          min-height: 40px;
          align-items: center;

          .custom_title {
            height: 36px;
            //flex: 1;
            border-radius: 8px;
            text-align: center;
            word-break: break-word;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            padding: 4px 8px;
          }

          .custom_title.active {
            background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
            box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
            color: #FFFFFF;
            font-weight: 500;
          }

        }

        .tabs {

          :deep(.nut-tabs__titles) {
            background-color: #0B0B23 !important;
            border-radius: 8px;
            height: 0px;
            margin-bottom: 8px;
          }

          // 排名
          .ranking {
            display: flex;
            flex-direction: column;
            gap: 27px;
            margin-top: 22px;

            .ranking_item {
              display: flex;
              flex-direction: column;
              border-radius: 8px;
              // overflow: hidden;

              .head {
                // padding: 7px 5px 7px 16px;
                display: flex;
                padding: 7px 7px 7px 16px;
                display: flex;
                flex-direction: row;
                position: relative;
                border-radius: 8px 8px 0 0;
                align-items: center;
                gap: 6px;

                .name {
                  font-family: Source Han Sans CN;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 21px;
                  text-align: center;
                  text-underline-position: from-font;
                  text-decoration-skip-ink: none;
                  color: #FFFFFF;
                  position: initial;
                  text-align: left;
                  opacity: 1;
                  margin-top: 0;
                }

                span {
                  position: absolute;
                  flex: 1;
                  text-align: right;
                  font-family: Niagara Solid;
                  font-size: 48px;
                  font-weight: 400;
                  line-height: 72px;
                  text-underline-position: from-font;
                  text-decoration-skip-ink: none;
                  right: 5px;
                  opacity: 20%;
                  color: #FFFFFF;
                  margin-top: 5px;
                }

                .ranking_icon {
                  position: absolute;
                  width: 80px;
                  height: 79.03px;
                  right: 14px;
                }
              }

              .body {
                z-index: 1;
                padding: 14px;
                box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
                background-color: #1D1C3C;


                border-radius: 0 0 8px 8px;
              }
            }
          }

          //  评分
          .rate_top_box {
            height: 206px;
          }

          .rate {
            gap: 0px;
            border-radius: 8px;
            overflow: hidden;
            opacity: 0px;
            padding: 10px 16px;
            box-shadow: 0.5px 0.5px 1px 0px #212361 inset;
            background: #0D0C24;

            .rate_head {
              border-bottom: 1px solid #1D1B43;
              display: flex;
              flex-direction: row;
              align-items: center;

              .score {
                font-family: PingFang SC;
                font-size: 40px;
                font-weight: 600;
                line-height: 56px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
                color: #FFFFFF;
              }

              .rate_head_end {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: end;
                gap: 4px;

                span {
                  font-family: PingFang SC;
                  font-size: 10px;
                  font-weight: 400;
                  line-height: 14px;
                  text-align: left;
                  text-underline-position: from-font;
                  text-decoration-skip-ink: none;

                }
              }

            }

            :deep(.rate_body .nut-rate-item:not(:last-child)) {
              margin-right: 4px !important;
            }

            .rate_body {
              padding-top: 16px;
              display: flex;
              flex-direction: column;
              gap: 6px;

              --nut-progress-outer-background-color: #2B2865;
              --nut-progress-base-height: 6px;

              .line {
                display: flex;
                flex-direction: row;
                gap: 10px;
                align-items: center;

                :deep(.nut-progress) {
                  flex: 1;
                }
              }
            }
          }

          :deep(.rate_bottom .nut-rate-item:not(:last-child)) {
            margin-right: 6px !important;
          }

          .rate_bottom {
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            gap: 11px;

            .rate {
              flex: 1;
              padding: 16px 0;
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 6px;

              span {
                font-family: Source Han Sans CN;
                font-size: 14px;
                font-weight: 400;
                line-height: 21px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
                color: #FFFFFF;
              }


              :deep(.nut-avatar-group) {
                .nut-avatar:last-child {
                  display: none;
                }
              }
            }
          }

          .nodata {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }

      .foot {
        padding: 12px 0;
        height: 40px;
        background-color: #100E26;
        display: flex;
        justify-content: center;
        gap: 4px;
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 500;
        line-height: 16.8px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #4C9EFF;
        align-items: center;
      }
    }

    .hot_box {
      width: 100vw;
      margin-left: -15px;

      :deep(.card_title) {
        width: 347px;

        .title_left {
          font-size: 14px;
          color: #FCFFFA;
          font-weight: 600;
        }
      }

      :deep(.home_winning) {
        .card_title {
          margin-bottom: 12px;
        }
      }
    }

    .collect_img {
      position: absolute;
      top: 4px;
      right: 4px;
    }

    .all_game {
      width: 100%;
      background-color: #1A1944;

      border-radius: 8px;
      position: relative;
      text-align: center;

      .bg_img {
        width: 100%;
      }

      .game_name {
        display: inline-block;
        text-align: center;
        width: 100%;
        word-break: break-all;

        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 600;
        line-height: 12px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #FFFFFF;
        // overflow: hidden; //超出的文本隐藏
        // text-overflow: ellipsis; //溢出用省略号显示
        // white-space: nowrap; //溢出不换行
      }


      // .game_name {
      //   width: 100%;

      //   // padding: 0 5px;
      //   // margin-top: 0px;
      //   // text-align: center;
      //   // display: inline-block;
      //   // overflow: hidden; //超出的文本隐藏
      //   // text-overflow: ellipsis; //溢出用省略号显示
      //   // white-space: nowrap; //溢出不换行

      //   // font-family: PingFang SC;
      //   font-size: 12px;
      //   // font-weight: 600;
      //   // line-height: 12px;
      //   // text-align: center;
      //   // text-underline-position: from-font;
      //   // text-decoration-skip-ink: none;

      //   // text-align: center
      // }

      // .other_game {
      //   position: relative;
      //   width: 110px;
      //   height: 146px;
      //   // margin-right: 6px;
      //   // margin-bottom: 6px;
      //   background: #1A1944;
      //   border-radius: 8px;
      // }


    }


  }


}

.modal_body {
  .content {
    padding: 30px 20px;

    .content_text {
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #fff;

      span {
        color: #F49A24;
      }
    }
  }

  .btns {
    width: 100%;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    gap: 13px;
  }
}

.popup_body {
  padding-top: 20px;

  .swiper_content {

    .swiper.swiper-horizontal {
      padding-bottom: 20px;

      :deep(.swiper-pagination) {

        .swiper-pagination-bullet {
          opacity: 1 !important;
          background-color: #C6C4F5 !important;

          &.swiper-pagination-bullet-active {
            background-color: #fff !important;
            width: 8px !important;
          }
        }
      }
    }

    :deep(.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal) {
      bottom: 0px !important;
    }

    :deep(.swiper-backface-hidden .swiper-slide) {
      width: 307px;
      border-radius: 8px;
      background: linear-gradient(180deg, #0D0523 51.91%, #2B155D 100%);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }


    .swiper-slide-prev,
    .swiper-slide-next {
      transform: scale(0.92);
    }

    .swiper-slide-active {
      transform: scale(1);
    }
  }

  .save_selected {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0 20px;

    .select {
      position: relative;

      .box {
        width: 14px;
        height: 14px;
        border-radius: 4px;
        border: 1px solid #A8A8CA;
        margin-right: 5px;
      }

      .selected_icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 14px;
        height: 14px;
      }
    }
  }

  .club_list_box {

    .club_list {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .club_card {
        width: 307px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 10px;
        padding: 10px;
        color: white;
        background: url(/imgs/club/add_club_bg.png) no-repeat;
        background-size: 100% 100%;

        .club_icon {
          position: relative;
          width: 48px;
          height: 48px;
          margin-right: 8px;
          // overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
          }

          .badge {
            width: 48px;
            position: absolute;
            bottom: -5px;
            right: -5px;
            border-radius: 0 0 8px 8px;
            font-size: 12px;
            text-align: center;
            color: white;
            background: rgba(0, 0, 0, 0.6);
          }
        }

        .club_info {
          flex: 1;
          overflow: hidden;

          .club_name {
            font-size: 14px;
            font-weight: bold;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .club_id,
          .club_desc {
            width: 190px;
            font-size: 12px;
            margin: 2px 0 0;
            font-family: PingFang SC;
            color: #AFB6BD;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .club_action {
          display: flex;
          align-items: center;

          .club_btn {
            width: 40px;
            height: 20px;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 12px;
            line-height: 20px;
            text-align: center;
            background: #1DBA8B;
          }

          .arrow {
            width: 16px;
            height: 16px;
            margin-left: 10px;
            font-size: 18px;
            color: #FFFFFF;
          }
        }
      }
    }
  }
}
</style>